<template>
  <div class="page_container">
    <el-form :inline="true" :model="searchForm" ref="searchForm" @keyup.enter.native="search" :size="size">
      <el-form-item label="产品名称" prop="title">
        <el-input v-model="searchForm.title" placeholder="请输入产品名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="类别" prop="keyWord">
        <el-select>
          <el-option></el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" :size="size" @click="search">查询</el-button>
      <el-button @click="resetSearch" icon="el-icon-refresh" :size="size">重置</el-button>
    </el-form>
    <div class="handleBox">
      <el-button :size="size" @click="addTravel">添加旅游产品</el-button>
    </div>
    <div class="tableBox">
      <el-table :data="dataList" border style="width: 100%;" height="100%">
        <el-table-column prop="title" header-align="center" align="center" label="产品名称" width="130"></el-table-column>
        <el-table-column prop="description" header-align="center" align="center" label="产品描述" min-width="160" show-overflow-tooltip></el-table-column>
        <el-table-column prop="price" header-align="center" align="center" label="价格" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="vipDiscount" header-align="center" align="center" label="vip折扣" width="90" show-overflow-tooltip></el-table-column>
        <el-table-column prop="place" header-align="center" align="center" label="旅游地点" min-width="90" show-overflow-tooltip></el-table-column>
        <el-table-column prop="type" header-align="center" align="center" label="产品类别" min-width="90" show-overflow-tooltip></el-table-column>
        <el-table-column fixed="right" header-align="center" align="center"
                         width="150" label="操作">
          <template slot-scope="{row}">
            <el-button type="text" size="small" v-if="!row.slideShow" @click="uploadSlideShow(row)">设为轮播</el-button>
            <el-button type="text" size="small" v-else @click="cancelSlideShow(row)">取消轮播</el-button>
            <el-button type="text" size="small" @click="editTravel(row)">编辑</el-button>
            <el-button type="text" size="small" style="color: #e66613" @click="delTravel(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination v-show="total>0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize" @pagination="getDataList" />

    <EditTravelModal :travelDialogShow.sync="travelDialogShow" :travelInfo="travelInfo" @refreshData="getDataList"></EditTravelModal>
    <DialogSetBanner :dialogSetBannerShow.sync="dialogSetBannerShow" :travelInfo="travelInfo" @refreshData="getDataList"></DialogSetBanner>
  </div>
</template>

<script>
  import api from '../../../utils/api'
  import Pagination from '@/components/Pagination'
  import EditTravelModal from './components/EditTravelModal'
  import DialogSetBanner from './components/DialogSetBander'
  import { mapGetters } from 'vuex'
  export default {
    name: 'addressList',
    components: {
      Pagination,
      EditTravelModal,
      DialogSetBanner
    },
    data () {
      return {
        searchForm: {
          title: '',
          pageNum: 1,
          pageSize: 10
        },
        dataList: [],
        total: 0,
        travelInfo: {},
        travelDialogShow: false,
        dialogSetBannerShow: false
      }
    },
    computed: {
      ...mapGetters(['size']),
    },
    mounted () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.$store.commit("app/SET_LOADING_STATE", true)
        api.travelInfoList(this.searchForm).then((res) => {
          if (res) {
            let {data, total} = res.data
            this.dataList = data
            this.total = Number(total)
          }
        }).catch((res) => {
        })
      },
      // 删除
      delTravel (row) {
        let infoId = row.infoId
        this.delConfirm().then(() => {
          api.delTravel({infoId}).then(res => {
            this.$message.success('删除成功')
            this.getDataList()
          })
        })
      },
      editTravel (row) {
        Object.assign(this.travelInfo, row)
        this.travelDialogShow = true
      },
      addTravel () {
        this.travelInfo = {}
        this.travelDialogShow = true
      },
      // 重置
      resetSearch () {
        this.$refs['searchForm'].resetFields()
      },
      // 查询
      search () {
        this.searchForm.current = 1
        this.getDataList()
      },
      uploadSlideShow(row) {
        Object.assign(this.travelInfo, row)
        this.dialogSetBannerShow = true
      },
      cancelSlideShow(row) {
        let params = {
          infoId: row.infoId,
          cancel: 1,
          file: null
        }
        api.updateSlideShow(params).then(res => {
          this.$message.success('取消成功')
          this.getDataList()
        })
      }
    }
  }
</script>

<style lang="scss">
  .el-icon-star-on {
    cursor: pointer;
    &.isDefault {
      color: #1989fa;

    }
  }
</style>
